<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const guides = ref([]);
const loading = ref(true);

// 模拟旅游攻略数据
const mockGuides = [
  {
    id: 1,
    title: '贵州喀斯特专辑（瀑布篇）',
    author: '旅行达人小王',
    date: '2023-05-15',
    readCount: 2450,
    image: '/travel-images/1 (5).png',
    category: '自然风光',
    tags: ['贵州', '瀑布', '摄影']
  },
  {
    id: 2,
    title: '冬季溧水小众打卡指南',
    author: '自驾游爱好者',
    date: '2023-01-20',
    readCount: 1890,
    image: '/travel-images/1 (6).png',
    category: '自驾游',
    tags: ['溧水', '冬季', '小众景点']
  },
  {
    id: 3,
    title: '黄浦江徒步骑行全攻略',
    author: '城市探索者',
    date: '2023-06-10',
    readCount: 3200,
    image: '/travel-images/1 (8).png',
    category: '城市探索',
    tags: ['上海', '徒步', '骑行']
  },
  {
    id: 4,
    title: '南京四季旅游攻略',
    author: '文化旅行者',
    date: '2023-04-05',
    readCount: 4500,
    image: '/travel-images/1 (9).png',
    category: '文化古迹',
    tags: ['南京', '四季', '历史文化']
  },
  {
    id: 5,
    title: '西安：旧长安的画皮',
    author: '历史研究者',
    date: '2023-03-18',
    readCount: 3100,
    image: '/travel-images/1 (4).png',
    category: '文化古迹',
    tags: ['西安', '历史', '古都']
  },
  {
    id: 6,
    title: '青海湖旅拍攻略',
    author: '摄影师小李',
    date: '2023-07-25',
    readCount: 5200,
    image: '/travel-images/1 (7).png',
    category: '摄影',
    tags: ['青海湖', '旅拍', '夏季']
  }
];

// 获取攻略列表
const fetchGuides = () => {
  loading.value = true;
  // 模拟API请求延迟
  setTimeout(() => {
    guides.value = mockGuides;
    loading.value = false;
  }, 500);
};

// 跳转到攻略详情页
const goToGuideDetail = (id) => {
  // 实际项目中这里应该跳转到攻略详情页
  alert(`查看攻略ID: ${id}的详情`);
};

// 组件挂载时获取数据
onMounted(() => {
  fetchGuides();
});
</script>

<template>
  <div class="guide-container">
    <div class="page-header">
      <h1>旅游攻略</h1>
      <p>精选旅游攻略，助您轻松出行</p>
    </div>
    
    <!-- 攻略分类筛选 -->
    <div class="filter-section">
      <div class="filter-tags">
        <span class="filter-tag active">全部攻略</span>
        <span class="filter-tag">自然风光</span>
        <span class="filter-tag">文化古迹</span>
        <span class="filter-tag">城市探索</span>
        <span class="filter-tag">美食攻略</span>
        <span class="filter-tag">自驾游</span>
        <span class="filter-tag">摄影</span>
      </div>
    </div>
    
    <!-- 攻略列表 -->
    <div class="main-content">
      <!-- 左侧攻略列表 -->
      <div class="guide-list">
        <div v-if="loading" class="loading">
          <p>加载中...</p>
        </div>
        
        <div v-else class="guides">
          <div 
            v-for="guide in guides" 
            :key="guide.id" 
            class="guide-item"
            @click="goToGuideDetail(guide.id)"
          >
            <div class="guide-image">
              <img :src="guide.image" :alt="guide.title" />
            </div>
            <div class="guide-content">
              <div class="guide-header">
                <h3 class="guide-title">{{ guide.title }}</h3>
                <span class="guide-category">{{ guide.category }}</span>
              </div>
              <div class="guide-meta">
                <span class="author">作者：{{ guide.author }}</span>
                <span class="date">{{ guide.date }}</span>
                <span class="read-count">阅读：{{ guide.readCount }}</span>
              </div>
              <div class="guide-tags">
                <span v-for="tag in guide.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
          <button class="page-btn prev-btn">上一页</button>
          <button class="page-btn active">1</button>
          <button class="page-btn">2</button>
          <button class="page-btn">3</button>
          <span>...</span>
          <button class="page-btn">10</button>
          <button class="page-btn next-btn">下一页</button>
        </div>
      </div>
      
      <!-- 右侧热门推荐 -->
      <div class="sidebar">
        <div class="hot-guides">
          <h3>热门攻略</h3>
          <div class="hot-list">
            <div v-for="(guide, index) in guides.slice(0, 5)" :key="guide.id" class="hot-item">
              <span class="hot-rank" :class="{ top: index < 3 }">{{ index + 1 }}</span>
              <span class="hot-title">{{ guide.title }}</span>
            </div>
          </div>
        </div>
        
        <div class="tags-cloud">
          <h3>热门标签</h3>
          <div class="cloud-tags">
            <span class="cloud-tag">国内游</span>
            <span class="cloud-tag">出境游</span>
            <span class="cloud-tag">自驾游</span>
            <span class="cloud-tag">摄影</span>
            <span class="cloud-tag">美食</span>
            <span class="cloud-tag">徒步</span>
            <span class="cloud-tag">亲子游</span>
            <span class="cloud-tag">蜜月</span>
            <span class="cloud-tag">背包客</span>
            <span class="cloud-tag">小众景点</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.guide-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.filter-section {
  margin-bottom: 30px;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.filter-tag {
  padding: 8px 20px;
  background-color: #f5f5f5;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-tag:hover {
  background-color: #ff9c00;
  color: white;
}

.filter-tag.active {
  background-color: #ff9c00;
  color: white;
}

.main-content {
  display: flex;
  gap: 30px;
}

.guide-list {
  flex: 3;
}

.sidebar {
  flex: 1;
}

.loading {
  text-align: center;
  padding: 50px;
  color: #666;
}

.guides {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.guide-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.guide-image {
  width: 200px;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.guide-item:hover .guide-image img {
  transform: scale(1.05);
}

.guide-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.guide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.guide-title {
  font-size: 18px;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.guide-category {
  padding: 4px 12px;
  background-color: #ff9c00;
  color: white;
  border-radius: 12px;
  font-size: 12px;
}

.guide-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #666;
}

.guide-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  padding: 2px 10px;
  background-color: #f0f0f0;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.page-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.page-btn:hover {
  border-color: #ff9c00;
  color: #ff9c00;
}

.page-btn.active {
  background-color: #ff9c00;
  color: white;
  border-color: #ff9c00;
}

.sidebar > div {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.sidebar h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ff9c00;
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hot-item {
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.hot-item:hover .hot-title {
  color: #ff9c00;
}

.hot-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.hot-rank.top {
  background-color: #ff9c00;
  color: white;
}

.hot-title {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cloud-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cloud-tag {
  padding: 6px 12px;
  background-color: #f0f0f0;
  border-radius: 15px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cloud-tag:hover {
  background-color: #ff9c00;
  color: white;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .guide-item {
    flex-direction: column;
  }
  
  .guide-image {
    width: 100%;
    height: 200px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
}
</style>